/* ===== 全局过渡动画样式 ===== */

/* 页面过渡基础设置 */
.router-view-container {
  position: relative;
  width: 100%;
}

/* 确保过渡动画过程中页面内容不会抖动或滚动 */
html.page-transitioning,
html.page-transitioning body {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

/* 页面过渡效果 */

/* 淡入淡出效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 左右滑动效果 */
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: 
    transform 600ms cubic-bezier(0.33, 1, 0.68, 1),
    opacity 600ms cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform, opacity;
  position: absolute;
  width: 100%;
  overflow: hidden;
}

.slide-left-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.slide-right-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.slide-right-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 苹果风格滑动效果 */
.apple-slide-enter-active,
.apple-slide-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

.apple-slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.apple-slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* 向上滑动效果 */
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

/* 放大缩小效果 */
.scale-enter-active,
.scale-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale(0.95);
}

/* 苹果产品页过渡效果 */
.product-enter-active,
.product-leave-active {
  transition: 
    transform 800ms cubic-bezier(0.2, 1, 0.3, 1),
    opacity 800ms cubic-bezier(0.2, 1, 0.3, 1);
  will-change: transform, opacity;
  position: absolute;
  width: 100%;
}

.product-enter-from {
  opacity: 0;
  transform: translateY(80px) scale(0.95);
}

.product-leave-to {
  opacity: 0;
  transform: translateY(-50px) scale(0.95);
}

/* 3D 翻转效果 */
.flip-enter-active,
.flip-leave-active {
  transition: 
    transform 700ms cubic-bezier(0.33, 1, 0.68, 1),
    opacity 700ms cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform, opacity;
  position: absolute;
  width: 100%;
  perspective: 1000px;
}

.flip-enter-from {
  opacity: 0;
  transform: rotateY(-10deg) translateZ(100px);
}

.flip-leave-to {
  opacity: 0;
  transform: rotateY(10deg) translateZ(-100px);
}

/* 组件级过渡效果 */
.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 300ms ease;
}

.component-fade-enter-from,
.component-fade-leave-to {
  opacity: 0;
}

/* 列表动画 */
.list-item {
  display: inline-block;
  margin-right: 10px;
}

.list-enter-active,
.list-leave-active {
  transition: all 500ms ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 性能优化 */
.page-transition {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
} 